// FANCC
// 是瞎写的嗷不建议参考

// 变量
let imgurl;// 用户上传的图片链接
let else_img = {//其他图片
    "paozhu": "https://fancc666.gitee.io/downloader/images/bz1.png",
};
let animate_obj = document.getElementById("movie_screen");// 小屏幕
let animate_events = [];// 参加过展示的元素
let debug = 0;// 测试用
let dba_num = 0;// 测试用
let music = true;


// 加载用户图片
function LoadImage(file) {
    console.log(file.files);
    // 检查后缀名
    let filextension = file.value.substring(file.value.lastIndexOf("."), file.value.length);
    filextension = filextension.toLowerCase();
    if((filextension !== '.jpg') && (filextension !== '.gif') && (filextension !== '.jpeg')
        && (filextension !== '.png') && (filextension !== '.bmp')) {
        alert("系统仅支持标准格式的照片，请您调整格式后重新上传!");
        file.focus();
    } else {
        if (file.files && file.files[0]){
            // HTML5 URL API
            imgurl = window.URL.createObjectURL(file.files[0]);// FF 7.0以上
            // 动画开始
            start_animate();
        } else {
            // 兼容IE9及以下
            alert("抱歉，浏览器不兼容");
        }
    }
}


// 步事件，单位毫秒
let steps = {
    0: function () {
        play_music();// 音乐播放
    },
    400: function () {
        add_img(258,114,112);// f0
    },
    1280: function () {
        add_img(388,114,112);// f1
    },
    2000: function () {
        add_img(120,114,112);// f2
    },
    2438: function () {
        remove_img([0,1,2]);
        add_img(258,134,112);// f3
    },
    2840: function () {
        remove_img([3]);
        add_img(152,36,300);// f4
    },
    3240: function () {
        remove_img([4]);
        add_img(2,36,300);// f5
        add_img(293,36,300);// f6
    },
    3760: function () {
        remove_img([5,6]);
        add_img(152,36,300);// f7
    },
    4195: function () {
        remove_img([7]);
        add_img(152,36,300,true,180);// f8
    },
    4396: function () {
        roll_img(animate_events[8]);
    },
    6520: function () {
        remove_img([8]);
        add_img(2,36,300);// f9
        add_img(293,36,300);// f10
        roll_img(animate_events[9]);
        roll_img(animate_events[10])
    },
    9118: function () {
        remove_img([9,10]);
        set_paozhu(117,49);// f11
    },
    9680: function () {
        set_paozhu(425,35);// f12
    },
    10435: function () {
        set_paozhu(282,96);// f13
    },
    10876: function () {
        add_img(-40,50,300,true);// f14-deb
        move_obj_to(animate_events[14],357,50,2003);
    },
    11518: function () {
        remove_img([11,12,13]);
    },
    12920: function () {
        roll_img(animate_events[14]);
        move_obj_to(animate_events[14],-186,-126,798);
    },
    13760: function () {
        remove_img([14]);
    },
    14482: function () {
        add_img(590,50,300,true);// f15-deb
        move_obj_to(animate_events[15],37,85,1880);
    },
    16400: function () {
        roll_img(animate_events[15]);
        move_obj_to(animate_events[15],590,50,1040);
    },
    17439: function () {
        remove_img([15]);
        add_img(590,50,300,true);// f16-deb1    !!!!
        move_obj_to(animate_events[16],155,40,879);
    },
    18318: function () {
        scale_obj(animate_events[16],0,2);
    },
    18400: function () {
        move_obj_to(animate_events[16],105,25,278);
    },
    18719: function () {
        scale_obj(animate_events[16],0,2.3);
    },
    19315: function () {
        remove_img([16]);
    },
    19422: function () {
        add_img(237,98,225,true);// f17-deb2
    },
    19599: function () {
        move_obj_to(animate_events[17],213,98,40);
    },
    20118: function () {
        scale_obj(animate_events[17],0,2);
    },
    20721: function () {
        scale_obj(animate_events[17],0,2.3);
    },
    20758: function () {
        move_obj_to(animate_events[17],213,90,40);
    },
    21399: function () {
        remove_img([17]);
        add_img(-95,-36,300,true);// f18-deb3
        move_obj_to(animate_events[18], 580,318,1360);
    },
    22840: function () {
        remove_img([18]);
        add_img(-6,290,96,true)// f19-deb4
    },
    22919: function () {
        set_paozhu(48,95);// f20
    },
    23158: function () {
        set_paozhu(162,75);// f21
    },
    23320: function () {
        set_paozhu(224,118);// f22
    },
    23638: function () {
        set_paozhu(76,50);// f23
    },
    23718: function () {
        set_paozhu(358,75);// f24
    },
    23879: function () {
        set_paozhu(200,50);// f25
    },
    24038: function () {
        set_paozhu(272,100);// f26
    },
    24440: function () {
        set_paozhu(374,67);// f27
    },
    24600: function () {
        set_paozhu(248,0);// f28
    },
    24835: function () {
        set_paozhu(338,0);// f29
    },
    25000: function () {
        set_paozhu(448,37)// f30
    },
    25200: function () {
        set_paozhu(248,180)// f31
    },
    25400: function () {
        set_paozhu(536,0)// f32
    },
    25440: function () {
        set_paozhu(348,180)// f33
    },
    25600: function () {
        set_paozhu(348,180)// f34
    },
    26000: function () {
        set_paozhu(548,180)// f35
    },
    26110: function () {
        set_paozhu(40,60)// f36
    },
    26360: function () {
        set_paozhu(150,60)// f37
    },
    26520: function () {
        set_paozhu(175,84)// f38
    },
    26918: function () {
        set_paozhu(338,58)// f39
    },
    27118: function () {
        set_paozhu(280,158)// f40
    },
    27358: function () {
        set_paozhu(333,133)// f41
    },
    27520: function () {
        set_paozhu(486,177)// f42
    },
    27912: function () {
        set_paozhu(592,128)// f43
    },
    29080: function () {
        clear_all();
    },
    29320: function () {
        add_img(63,130,100,true);// f44-deb5
        roll_img(animate_events[44]);
        move_obj_to(animate_events[44],263,0,2557);
    },
    31920: function () {
        move_obj_to(animate_events[44],395,215,4038);
    },
    35958: function () {
        move_obj_to(animate_events[44],140,180,3322);
    },
    39280: function () {
        move_obj_to(animate_events[44],275,-20,4318);
    },
    43640: function () {
        remove_img([44]);
    },
    29322: function () {
        add_img(595,130,100,true);// f45
    },
    30238: function () {
        remove_img([45]);
    },
    29823: function () {
        add_img(595,230,100,false);// f46
        roll_img(animate_events[46]);
        move_obj_to(animate_events[46],-50,230,4456);
    },
    34279: function () {
        deroll_img(animate_events[46]);
        animate_events[46].className = "common_img";
    },
    43798: function () {
        remove_img([46]);
    },
    29919: function () {
        add_img(-50,0,100);// f47
        move_obj_to(animate_events[47],640,0,13680);
    },
    43642: function () {
        remove_img([47]);
    },
    31198: function () {
        add_img(595,130,100,false);// f48
        roll_img(animate_events[48]);
        move_obj_to(animate_events[48],-100,100,11122);
    },
    42358: function () {
        remove_img([48]);
    },
    32836: function () {
        add_text(633,10,"过年啦","red");// f49
        add_text(633,34,"过年啦","red");// f50
        move_obj_to(animate_events[49],-60,10,16072);
        move_obj_to(animate_events[50],-60,34,16072);
    },
    48998: function () {
        remove_img([49,50]);
    },
    41278: function () {
        add_img(226,80,200);// f51
        animate_events[51].classList.add("scale_big");
    },
    63080: function () {
        animate_events[51].classList.remove("scale_big");
        animate_events[51].classList.add("scale_small");
    },
    64520: function () {
        remove_img([51]);
    },
    45758: function () {
        add_text(180,86,"欢","#ffe200",55,true);// f52
        scale_obj(animate_events[52], 1);
        add_text(244,86,"欢","#ffe200",55,true);// f53
        add_text(309,86,"喜","#ffe200",55,true);// f54
        add_text(363,86,"喜","#ffe200",55,true);// f55
        add_text(201,158,"过","#ffe200",55,true);// f56
        add_text(271,158,"大","#ffe200",55,true);// f57
        add_text(341,158,"年","#ffe200",55,true);// f58
    },
    46679: function () {
        scale_obj(animate_events[53],2);
    },
    48960: function () {
        scale_obj(animate_events[54],2);
    },
    51198: function () {
        scale_obj(animate_events[55],2);
    },
    53473: function () {
        scale_obj(animate_events[56],2);
    },
    55760: function () {
        scale_obj(animate_events[57],2);
    },
    58038: function () {
        scale_obj(animate_events[58],2);
    },
    72120: function () {
        clear_all();// 清除所有元素
    }
};
debug = 0;// 测试用
dba_num = 0;// 测试用

function start_animate() {
    document.getElementById("up_btn").classList.add("hide");// 隐藏上传按钮
    console.log(imgurl);
    // 如果是手机端旋转小屏幕
    if (document.body.clientWidth < document.body.clientHeight) {
        animate_obj.classList.add("movie_screen_mobile");
    }else {
        animate_obj.classList.add("movie_screen");
    }
    // 小屏幕边框
    animate_obj.classList.add("border");
    // 测试用
    if (dba_num) {
        for (let a=0;a<dba_num;a++) {
            animate_events.push(null);
        }
    }
    // 播放步事件
    for (let i in steps) {
        if (i>=debug) {
            setTimeout(function () {
                steps[i]();
            }, i-debug);
        }
    }
}
// 加图片
function add_img(x, y, size=45, rot=true, rot_num=null, url=imgurl) {
    // console.log(x,y,size);
    let image = document.createElement("img");
    if (rot) {// debuging
        image.classList.add("common_img");
        if (rot_num !== null) {
            image.style.transform = `rotate(${rot_num}deg)`;
        }
    }else {
        image.classList.add("common_img2");
    }
    if (url){
        image.src = url;
    } else {
        image.src = imgurl;
    }
    image.style.left = String(x)+"px";
    image.style.top = String(y)+"px";
    image.style.width = String(size)+"px";
    image.style.height = String(size)+"px";
    animate_obj.appendChild(image);
    animate_events.push(image);
}
// 删图片
function remove_img(ids) {
    for (let a=0;a<ids.length;a++) {
        if (animate_events[ids[a]]) {
            animate_obj.removeChild(animate_events[ids[a]]);
        }
        animate_events.splice(ids[a],1, null);
    }
}
// 清除全部
function clear_all() {
    for (let i=0;i<animate_events.length;i++) {
        remove_img([i]);
    }
}
// 旋转
function roll_img(img) {
    if (img) {
        img.classList.add("roll");
    }
}
// 停止旋转
function deroll_img(img) {
    if (img){
        img.classList.remove("roll");
    }
}
// 爆竹
function set_paozhu(x,y) {
    let pz = document.createElement("img");
    pz.src = else_img["paozhu"];
    pz.style.left = String(x)+"px";
    pz.style.top = String(y)+"px";
    pz.style.width = "96px";
    pz.classList.add("paozhu");
    animate_obj.appendChild(pz);
    animate_events.push(pz);
}
// 移动
function move_obj_to(obj,x,y,time) {
    let nx = Number(obj.style.left.slice(0,-2));// 当前x轴
    let ny = Number(obj.style.top.slice(0,-2));// 当前y轴
    let dx = x-nx;// 横差
    let dy = y-ny;// 纵差
    let m40x = dx/time*40;// 每一帧的位移
    let m40y = dy/time*40;
    // 运动
    for (let i=0;i<Math.round(time/40);i++) {
        setTimeout(function () {
            obj.style.left = String(Number(obj.style.left.slice(0,-2))+m40x)+"px";
            obj.style.top = String(Number(obj.style.top.slice(0,-2))+m40y)+"px";
        }, i*40);
    }
}
// 缩放
function scale_obj(obj,mode,mode_attr=1) {
    switch (mode) {
        case 0:{
            if (obj.style.transform.indexOf("scale") === -1) {
                obj.style.transform += `scale(${mode_attr})`;
                if (obj.classList.contains("common_img")) {
                    obj.style.transform += "rotate(45deg)";
                }
            }else {
                // if (obj.classList.contains("common_img"))
                obj.style.transform = obj.style.transform.replace(/scale\(*\)/,`scale(${mode_attr})`);
            }
            break;
        }
        case 1:{
            obj.classList.add("sm_wr");
            break;
        }
        case 2:{
            obj.classList.add("sc_wr");
            break;
        }
        default:{
            scale_obj(obj,0);
        }
    }
}
// 添加文字
function add_text(x,y,text,color="black",size=20,ts=false) {
    let d = document.createElement("span");
    d.innerHTML = text;
    d.classList.add("common_img2");
    d.style.left = `${x}px`;
    d.style.top = `${y}px`;
    d.style.color = color;
    d.style.fontSize = `${size}px`;
    d.style.wordBreak = "keep-all";
    if (ts) {
        d.classList.add("w_end");
    }
    animate_obj.appendChild(d);
    animate_events.push(d);
}
// 播放音乐
function play_music() {
    let aud = document.getElementById("aud");
    if (music) {
        aud.currentTime = 0;
        aud.play();
    }
}
